<template>
    <div class="login">
        <div class="logo">
            <img src="../assets/img01.png"/>
        </div>
            <div class="input_in">
            <form :model="loginForm">
                <input type="text" v-model="loginForm.usersName"     :placeholder="name"/>
                <input type="password" v-model="loginForm.password" :placeholder="pas"/>
            </form>
            </div>
            <!-- 登录按钮 -->
            <div class="reg_btn">
                <button @click="login">登录</button>
            </div>
            <div class="a">
                <a href="#" @click.prevent="register">_没有账号,请注册</a>
           </div>
    </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      loginForm: {
        usersName: '',
        password: ''
      },
      name: '请输入用户名或手机号',
      pas: '请输入密码'
    }
  },
  methods: {
    register () {
      this.$router.push('/register')
    },
    async login () {
      const { data: res } = await this.$http.post(`usersLogin/name/${this.loginForm.usersName}/password/${this.loginForm.password}`)
      console.log(res)
      if (res.code !== 200) {
        return alert('登录失败')
      }
      localStorage.setItem('ele_login', res.data.usersId)
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}
.login{
     text-align: center;
}
.logo img{
    width: 220px;
    height: 120px;
}
.input_in input{
     border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    width: 94%;
    outline: none;
    margin-top: 15px;
 }

.co{
    margin-top: 15px;
}
.reg_btn button {
     width: 100%;
    height: 40px;
    background-color: #81a0dad0;
    border-radius: 4px;
    color: white;
    font-size: 14px;
    border: none;
    outline: none;
    margin-top: 15px;
}
.a{
    margin-top: 20px;
}
.a a{
    text-decoration: none;
}
</style>
